<template>
	<div class="bottomBox" :style="bottom ? style + bottom : null">
		<slot></slot>
	</div>
</template>
 
<script>
	export default {
		props:{
			bottom: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				style: 'position: fixed;bottom:'
			};
		}
	}
</script>

<style lang="scss">
	.bottomBox{
		// position: fixed;
		// bottom: 0;
		// left: 0;
		// height: 14.4vw;
		width: 100vw;
		background-color: #1D1D1A;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 2vw 4vw;
		// border-top: 1px solid #F8F8F8;
		padding-bottom: calc(env(safe-area-inset-bottom) + 2.13vw);
		transition: all .3s;
		position: relative;
		z-index: 2;
	}
</style>
